#@adminDialogLayout()

#define css()

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>传递事件参数</title>
<style type="text/css">

    body, button, input, select, textarea {
        font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
    }
    p{
        width:303px;
        padding-top:3px;
        overflow:hidden;
    }
    #container {
        min-width:1100px;
        min-height:400px;
    }
</style>
#end


#define main()
<div class="jbolt_page">
    <div class="jbolt_page_content">
        <div class="row">
            <form  onsubmit="return false;"  id="retailerFormLocation" action="/auth/mall/retailer/update_location" method="post">

            <input type="hidden" id="retailer.id" name="retailer.id" value="#(retailer.id)">
            <div class="col-12">
                <div id="container"></div>
                <input style="width:200px;padding:3px 4px;" type="text" id="place" /> 输入地址，自动完成<br><br>

            </div>

            <div class="row " style="margin: auto;margin-top: 50px">
            <div class="form-group row">
                <label class="col-3 col-form-label">商家名称</label>
                <div class="col-8">
                    <input class="form-control" type="text" data-rule="required"   readonly="readonly" name="retailer.name" value="#(retailer.name??)">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-3 col-form-label">经度</label>
                <div class="col-8">
                    <input class="form-control" type="text" data-rule="required"   readonly="readonly" id="latitude" name="retailer.latitude" value="#(retailer.latitude??0)">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-3 col-form-label">纬度</label>
                <div class="col-8">
                    <input class="form-control" type="text" data-rule="required"   readonly="readonly" id="longtitude" name="retailer.longtitude" value="#(retailer.longtitude??0)">
                </div>
            </div>
            </div>

            </form>

        </div>
    </div>
</div>
#end


#define js()
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place"></script>

<script>

    function init() {
       let latitude = document.getElementById("latitude").value;
       let longtitude = document.getElementById("longtitude").value;


       if (latitude == null ||  latitude == 0 || longtitude == null ||longtitude==0){
         latitude = 28.374221148733284;
         longtitude =  111.2129420042038;
       }

        var center = new qq.maps.LatLng(latitude,longtitude);


        var map = new qq.maps.Map(document.getElementById('container'),{
            center: center,
            zoom: 13
        });
        //创建marker
        var marker1 = new qq.maps.Marker({
            position: center,
            map: map
        });

        //绑定单击事件添加参数
        qq.maps.event.addListener(map, 'click', function(event) {

            $("#latitude").attr("value",event.latLng.getLat());
            $("#longtitude").attr("value",event.latLng.getLng());

            clearOverlays();
            var marker=new qq.maps.Marker({
                position:event.latLng,
                map:map
            });
            qq.maps.event.addListener(map, 'click', function(event) {
                marker.setMap(null);
            });

        });

        //清除覆盖层
        function clearOverlays() {

            marker1.setMap(null);

        }


        //实例化自动完成
        var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
        var keyword = "";
        //调用Poi检索类。用于进行本地检索、周边检索等服务。
        var searchService = new qq.maps.SearchService({
            complete : function(results){
                if(results.type === "CITY_LIST") {
                    searchService.setLocation(results.detail.cities[0].cityName);
                    searchService.search(keyword);
                    return;
                }
                var pois = results.detail.pois;
                var latlngBounds = new qq.maps.LatLngBounds();
                for(var i = 0,l = pois.length;i < l; i++){
                    var poi = pois[i];
                    latlngBounds.extend(poi.latLng);
                }
                map.fitBounds(latlngBounds);
            }
        });
        //添加监听事件
        qq.maps.event.addListener(ap, "confirm", function(res){
            keyword = res.value;
            searchService.search(keyword);
        });





    }

    //异步加载地图库函数文件
    function loadScript() {
        //创建script标签
        var script = document.createElement("script");
        //设置标签的type属性
        script.type = "text/javascript";
        //设置标签的链接地址
        script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";



        //添加标签到dom
        document.body.appendChild(script);



    }

    window.onload = loadScript;    // dom文档加载结束开始加载 此段代码









</script>

#include("/_view/_admin/common/_formjs.html",formId="retailerFormLocation")
#end